{# Copyright (c) 2015-2017, NVIDIA CORPORATION.  All rights reserved. #}

{% extends "job.html" %}
{% from "helper.html" import serve_file %}

{% block job_content %}

<script src="{{ url_for('static', filename='js/model-graphs.js', ver=dir_hash) }}"></script>

{% set task = job.train_task() %}

<div class="row">
    <div class="col-sm-6">
        <div class="well">
            <dl>
                <dt>Job Directory</dt>
                <dd>{{ job.dir() }}</dd>
                <dt>Disk Size</dt>
                <dd>{{job.disk_size_fmt()}}</dd>
                {% for key,value in task.get_model_files().items() %}
                <dt>{{key}}</dt>
                <dd>{{serve_file(task, value)}}</dd>
                {% endfor %}
                {% if task.log_file %}
                <dt>Raw {{task.get_framework_id()}} output</dt>
                <dd>{{serve_file(task, task.log_file)}}</dd>
                {% endif %}
                {% if task.pretrained_model %}
                <dt>Pretrained Model</dt>
                <dd>{{task.pretrained_model}}</dd>
                {% endif %}
                <dt>Visualizations</dt>
                <dd><a href="http://localhost:6006/" target="new">Tensorboard</a></dd>
            </dl>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="well">
            <h4 class='text-center'>Dataset</h4>
            <div id="dataset-summary"></div>
            {% if job.dataset %}
            <script>
            $.ajax("{{url_for('digits.dataset.views.summary', job_id=job.dataset.id())}}",
            {
                type: "GET",
                }
            )
            .done(function(data) {
                $("#dataset-summary").html(data);
                })
            .fail(function(data) {
                $("#dataset-summary").html("");
                errorAlert(data);
                });
            </script>
            {% endif %}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="well">
            <div id="combined-graph" class="combined-graph"
                style="height:500px;width:100%;background:white;display:none;"></div>
            <div class="pull-right combined-graph" style="display:none;">
                <a class="btn btn-primary btn-sm" target="_blank"
                    href="{{url_for('digits.model.images.generic.views.large_graph', job_id=job.id())}}">
                    View Large
                </a>
                {% if job.train_task().has_timeline_traces() %}
                <a class="btn btn-primary btn-sm" target="_blank"
                    href="{{url_for('digits.model.images.classification.views.timeline_tracing', job_id=job.id())}}">
                    View Timeline Traces
                </a>
                {% endif %}
            </div>
            <br>
            <br>
            {% set combined_graph_data = job.train_task().combined_graph_data() %}
            {% if combined_graph_data %}
            <script>
                drawCombinedGraph({% autoescape false %}{{combined_graph_data}}{% endautoescape %});
            </script>
            {% endif %}

            <div id="lr-graph" class="lr-graph"
                style="height:300px;width:100%;background:white;display:none;"></div>
            {% set lr_graph_data = job.train_task().lr_graph_data() %}
            {% if lr_graph_data %}
            <script>
                drawLRGraph({% autoescape false %}{{lr_graph_data}}{% endautoescape %});
            </script>
            {% endif %}

            {% set task = job.train_task() %}
            <hr>
            <form id="test-model-form"
                enctype="multipart/form-data"
                method="post"
                onkeypress="return event.keyCode != 13;" {# Disable enter to submit #}
                {% if not task.has_model() %}
                style="display:none;"
                {% endif %}
                >
                <h2>Trained Models</h2>
                <div class="row">
                    <div class="col-sm-12">
                        <label for="snapshot_epoch">Select Model</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <select id="snapshot_epoch" name="snapshot_epoch" class="form-control">
                            </select>
                            <script>
function updateSnapshotList(data) {
    var selected = null;
    var latest_selected = true;
    if ($("#snapshot_epoch").find('option').length) {
        latest_selected = ($("#snapshot_epoch").find('option').first().val() == $("#snapshot_epoch").val());
        selected = $("#snapshot_epoch").val();
    }
    // remove old options
    $("#snapshot_epoch").find("option").remove();
    if (data.length)
        $("#test-model-form").show();
    for (var i=0; i<data.length; i++) {
        option = data[i];
        $("#snapshot_epoch").append('<option value="'+option[0]+'">'+option[1]+'</option>');
    }
    if (data.length) {
        var value = selected;
        if (!value || latest_selected)
            value = data[0][0];
        if (value)
            $("#snapshot_epoch").val(value);
    }
}
updateSnapshotList({% autoescape false %}{{task.snapshot_list()}}{% endautoescape %});
                            </script>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <button
                            formaction="{{url_for('digits.model.views.download', job_id=job.id())}}"
                            formmethod="post"
                            formenctype="multipart/form-data"
                            class="btn btn-info">
                            Download Model
                        </button>
                        <button
                            formaction="{{url_for('digits.model.views.to_pretrained', job_id=job.id())}}"
                            formmethod="post"
                            formenctype="multipart/form-data"
                            class="btn btn-success">
                            Make Pretrained Model
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <h3>Select Visualization Method</h3>
                        <div class="form-group">
                            <select id="view_extension_id" name="view_extension_id" class="form-control">
                                {% for key in view_extensions.keys()|sort %}
                                    <option value="{{ key }}">{{ view_extensions[key] }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <h3>Visualization Options</h3>
                        <div id="view_extension-details">
                        </div>
                    </div>
                    <script>
                        $("#view_extension_id").change(function() {
                            if ($(this).val()) {
                                $.ajax("{{config['URL_PREFIX']}}/models/view-config/" + $(this).val(),
                                    {
                                        type: "GET",
                                        }
                                    )
                                .done(function(data) {
                                    $("#view_extension-details").html(data);
                                    })
                                .fail(function(data) {
                                    $("#view_extension-details").html("");
                                    errorAlert(data);
                                    });
                                }
                            });
                        $("#view_extension_id").change();
                    </script>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <h3>Inference Options</h3>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for="dont_resize">
                                <input id="dont_resize" name="dont_resize" type="checkbox" value="y">
                                Do not resize input image(s)
                            </label>
                            <span name="dont_resize_explanation"
                                class="explanation-tooltip glyphicon glyphicon-question-sign"
                                data-container="body"
                                title="By default input images are resized to the dimensions of the images in the dataset. Check this box
                                to skip this stage. This may be useful for models that can take inputs of various dimensions."
                                ></span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group">
                        <div class="col-sm-6">
                            <h3>Select Inference form</h3>
                            <div class="form-group">
                                <select id="data_extension_id" name="data_extension_id" class="form-control">
                                    {% for key in data_extensions.keys()|sort %}
                                        <option value="{{ key }}">{{ data_extensions[key] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" id="custom-inference-form" >
                    <div id="custom-inference-form-html">
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="show_visualizations">
                                <input id="show_visualizations" name="show_visualizations" type="checkbox" value="y">
                                Show visualizations and statistics
                            </label>
                            <span name="show_visualizations_explanation"
                                class="explanation-tooltip glyphicon glyphicon-question-sign"
                                data-container="body"
                                title="For each layer in the network, show statistics for the weights/activations and attempt to represent the data visually. Can delay classification considerably."
                                ></span>
                        </div>

                        <input type="hidden" name="Language" value="English">

                        <button name="infer-db-btn"
                            formaction="{{url_for('digits.model.images.generic.views.infer_extension', job_id=job.id())}}"
                            formmethod="post"
                            formenctype="multipart/form-data"
                            formtarget="_blank"
                            class="btn btn-primary">
                            Test
                        </button>
                    </div>
                </div>

                <div class="row" id="default-inference-form">
                    <div class="col-sm-6">
                        <h3>Test a single image</h3>
                        <div class="form-group">
                            <label for="image_path" class="control-label">Image Path</label>
                            <span name="image_path_explanation"
                                class="explanation-tooltip glyphicon glyphicon-question-sign"
                                data-container="body"
                                title="Can be a path on the server's filesystem, or a URL."
                                ></span>
                            <input type="text" id="image_path" name="image_path" class="form-control autocomplete_path">
                        </div>
                        <div>
                            <label for="image_file" class="control-label">Upload image</label>
                            <div class="form-group cl-upload-files">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <span class="btn btn-info btn-file" %s>
                                            Browse&hellip;
                                            <input class="form-control" type="file" id="image_file" name="image_file" >
                                        </span>
                                    </span>
                                    <input class="form-control" type="text" readonly>
                                </div>
                            </div>
                        </div>
                        <script type="text/javascript">
                            // When you fill in one field, the other gets blanked out
                            $("#image_path").change(function() { $("#image_file").val(""); });
                            $("#image_file").change(function() { $("#image_path").val(""); });
                        </script>
                        <div class="form-group">
                            <label for="show_visualizations">
                                <input id="show_visualizations" name="show_visualizations" type="checkbox" value="y">
                                Show visualizations and statistics
                            </label>
                            <span name="show_visualizations_explanation"
                                class="explanation-tooltip glyphicon glyphicon-question-sign"
                                data-container="body"
                                title="For each layer in the network, show statistics for the weights/activations and attempt to represent the data visually. Can delay classification considerably."
                                ></span>
                        </div>
                        <button name="infer-one-btn"
                            formaction="{{url_for('digits.model.images.generic.views.infer_one', job_id=job.id())}}"
                            formmethod="post"
                            formenctype="multipart/form-data"
                            formtarget="_blank"
                            class="btn btn-primary">
                            Test One
                        </button>
                        <h3>Test a Database</h3>
                        <div class="form-group">
                            <label for="db_path" class="control-label">LMDB path</label>
                            <input type="text" id="db_path" name="db_path" class="form-control autocomplete_path">
                            <small>Specify path to LMDB database on server</small>
                        </div>
                        <button name="infer-db-btn"
                            formaction="{{url_for('digits.model.images.generic.views.infer_db', job_id=job.id())}}"
                            formmethod="post"
                            formenctype="multipart/form-data"
                            formtarget="_blank"
                            class="btn btn-primary">
                            Test DB
                        </button>
                    </div>
                    <div class="col-sm-6">
                        <h3>Test a list of images</h3>
                        <div>
                            <label for="image_list" class="control-label">Upload Image List</label>
                            <div class="form-group cl-upload-files">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <span class="btn btn-info btn-file" %s>
                                            Browse&hellip;
                                            <input class="form-control" type="file" id="image_list" name="image_list" >
                                        </span>
                                    </span>
                                    <input class="form-control" type="text" readonly>
                                </div>
                                <small>Accepts a list of filenames or urls (you can use your val.txt file)</small>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="image_folder" class="control-label">Image folder <i>(optional)</i></label>
                            <input type="text" id="image_folder" name="image_folder" class="form-control autocomplete_path">
                            <small>Relative paths in the text file will be prepended with this value before reading</small>
                        </div>
                        <div class="form-group">
                            <label for="num_test_images" class="control-label">Number of images use from the file</label>
                            <input type="text" id="num_test_images" name="num_test_images" class="form-control" placeholder="All">
                            <small>Leave blank to use all</small>
                        </div>
                        <button name="infer-many-btn"
                            formaction="{{url_for('digits.model.images.generic.views.infer_many', job_id=job.id())}}"
                            formmethod="post"
                            formenctype="multipart/form-data"
                            formtarget="_blank"
                            class="btn btn-primary">
                            Test Many
                        </button>
                        <span name="infer-many-explanation"
                            class="explanation-tooltip glyphicon glyphicon-question-sign"
                            data-container="body"
                            title="Infer a list of images and show the network outputs."
                            ></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$("#data_extension_id").change(function() {
    if ($(this).val()) {

        $.ajax("{{config['URL_PREFIX']}}/datasets/inference-form/" + $(this).val() + "/" + "{{ job.dataset.id() }}",
            {
                type: "GET",
                }
            )
        .done(function(data) {
                if (data.length > 0)
                {
                    $("#default-inference-form").hide();
                    $("#custom-inference-form-html").html(data);
                    $("#custom-inference-form-html").show();
                }
                else
                {
                    $("#custom-inference-form-html").hide();
                    $("#default-inference-form").show();
                }
            })
        .fail(function(data) {
            $("#custom-inference-form-html").html("");
            errorAlert(data);
            });
        }
    });
$("#data_extension_id").change();
</script>

{% endblock %}
